<template>
	<section>
		<nav-search
			id="nav-search"
			v-model:searchType="searchType"
			v-model:searchContent="searchContent"
			v-model:transferContent="transferContent"
		/>
		<section class="hp">
			<div id="hp-search" class="hp-search bg-danger-5">
				<div class="hp-search_container">
					<hp-sticky-search
						v-model:searchType="searchType"
						v-model:searchContent="searchContent"
						v-model:transferContent="transferContent"
						:is-nav="false"
						@search="handleSearch"
						@transfer="handleTransfer"
					/>
				</div>
			</div>

			<div class="hp-common bg-success-4">
				<basic-icon name="Bell" color="red"></basic-icon
				><a-input :style="{ width: '320px' }" placeholder="Please enter something" allow-clear />
				<h1>hi，sort the data</h1>
				<ul ref="payMethodsRef" class="pay-methods">
					<li v-for="method in methods" :key="method.sort" class="sort-wrapper" :data-index="method.sort">
						<span class="sort-text">{{ method.pay_name }}</span>
						<div class="sort-handle"><icon-more-vertical size="18px" /></div>
					</li>
				</ul>
			</div>
			<div class="hp_part2">
				<img src="~/assets/images/group-photo.jpg" object-fit="cover" class="w-full invisible" alt="" srcset="" />
			</div>
			<div class="hp-common bg-white">
				<ul class="w-full flex-col-1 gap-y-8">
					<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
				</ul>
				<section v-if="loading" class="flex-col-1 gap-y-8 m-auto px-4">
					<basic-skeleton
						:loading="loading"
						:show-count="20"
						:widths="[['100%'], ['100%', '100%'], ['100%', '100%'], ['100%', '100%'], ['100%', '100%']]"
					/>
					<a-spin dot class="mx-auto mb-4" />
				</section>
				<div
					v-else
					ref="observerElement"
					class="w-9rem h-3rem bg-black text-white rounded-full flex-center mx-auto"
					@click="handleMore"
				>
					查看更多
				</div>
			</div>
			<div class="hp-common bg-amber">
				<h1>nice right?</h1>
				<a href="#hp-search" class="opacity-btn">搜索域名</a>
			</div>
		</section>
	</section>
</template>
<script setup lang="ts">
import type { PayMethodModel, SortableEvent } from "~/composables/types";
const { t } = useI18n();
const {
	public: { masterDomain }
} = useRuntimeConfig();
useHead({
	titleTemplate: () => t("console.productName") + " - " + t("console.nav.workbench")
});
useSeoMeta({ ...useSeoTags({ url: masterDomain }) });
const items = ref([{ name: "Item 0" }, { name: "Item 1" }, { name: "Item 2" }]);
const observerElement = ref();

const deviceType = computed(() => useAppStore().deviceType);
const searchType = ref(1);
const observer = ref();
const isStart = ref(false);
const loading = ref(false);
const searchContent = ref<string>("");
const transferContent = ref([]);
const handleSearch = () => {
	console.log("search", searchContent.value, searchType.value);
};
const handleTransfer = () => {
	console.log("search", searchContent.value);
};
const handleMore = () => (isStart.value = true);
// 模拟异步加载更多元素
const loadMoreItems = async () => {
	if (items.value.length >= 100) return;
	// 发起异步请求获取更多数据
	const newItems = await fetchMoreItems(items.value.length);

	// 更新items数组
	items.value.push(...newItems);
};

watchEffect(() => {
	if (!isStart.value || !observerElement.value) return;
	observer.value = new IntersectionObserver((entries, _observer) => {
		entries.forEach(entry => {
			// 当触底时加载更多元素
			if (entry.isIntersecting) loadMoreItems();
		});
	}).observe(observerElement.value);
});
// 模拟异步请求获取更多数据
const fetchMoreItems = (index: number) => {
	// 发起异步请求，获取更多数据
	// 返回一个Promise，包含新的元素数组
	// 这里可以根据实际需求来实现数据获取逻辑
	return new Promise(resolve => {
		loading.value = true;
		setTimeout(() => {
			const newItems = [];
			for (let i = 0; i < 20; i++) {
				newItems.push({ name: `Item ${index + i}` });
			}
			loading.value = false;
			resolve(newItems);
		}, 1500);
	});
};

let scrollFn = null as any;
onMounted(() => {
	useGsapBackgroundAnimation(".hp-search");
	useGsapBackgroundAnimation(".hp_part2", 0.05);
	const { selector } = useHeaderRoom(document.querySelector("#nav-search")!, {
		offset: -200,
		tolerance: { up: 0, down: 0 },
		classes: {
			initial: "search-animated", // 当元素初始化后所设置的 class
			pinned: "slideUp", // 向上滚动时设置的 class
			unpinned: "slideDown", // 向下滚动时所设置的 class
			bottom: "headroom--bottom", // 当元素到达底部时所设置的 class
			top: "headroom--top" // 当元素到达顶部时所设置的 class
		}
	});
	scrollFn = function () {
		const domainServiceHeight = document.getElementById("domain-services")?.scrollHeight;
		if (window.scrollY <= 500 || window.scrollY >= domainServiceHeight! * 0.7) {
			selector.style.display = "none";
		} else {
			selector.style.display = "block";
		}
	};
	scrollFn();
	window.addEventListener("scroll", debounce(scrollFn, 20), false);
});

const payMethodsRef = ref<Element>();
const methods = ref<PayMethodModel[]>([
	{ sort: 1, pay_name: "微信", pay_method: "wx" },
	{ sort: 2, pay_name: "支付宝", pay_method: "zfb" },
	{ sort: 3, pay_name: "Paypal", pay_method: "paypal" }
]);
useSortable({ el: payMethodsRef, data: methods }, function (evt: SortableEvent, data: any) {
	console.log("evt1: ", evt, data);
});
// 组件卸载时清除事件监听器
onUnmounted(() => {
	window.removeEventListener("scroll", debounce(scrollFn, 20), false);
});
const backgroundSizeType = computed(() => {
	if (deviceType.value === 1) return "contain";
	return "contain";
});
</script>
<style lang="less">
.search-animated {
	will-change: transform;
	z-index: 99;
	position: fixed;
	top: 4.4rem;
	left: 0;
	right: 0;
	transition: all 0.2s ease-in-out;
}
.search-animated.slideDown {
	top: 0;
}
.search-animated.slideUp {
	top: 4.4rem;
}
.search-animated.headroom--top {
	display: none;
}
.search-animated.headroom--bottom {
	display: none;
}
.custom-drawer {
	@apply flex items-center justify-between;
	.arco-drawer {
		@apply px-6;
		.arco-drawer-header {
			border-bottom: none;
			@apply px-0;
		}
	}
}
</style>
<style lang="less">
.pay-methods {
	@apply w-300px flex-col-1 gap-y-2 pl-0;
	.sort-wrapper {
		@apply h-50px  flex-between gap-x-2 p-1 px-2 select-none rounded-2;
		background: var(--public_background_font_Color);
		border: 1px solid #eee;
		list-style: none;
		.sort-handle {
			@apply w-8 h-8 flex-center bg-[#eee] rounded-1/2;
			cursor: pointer;
			border: 1px solid #eee;
		}
	}
}
@media screen and (max-width: 768px) {
	.pay-methods {
		@apply !w-full px-6;
	}
}
.arco-input-tag {
	@apply !bg-transparent;
	background-color: transparent !important;
}
.hp {
	@apply flex flex-col h-full relative;
	transition: transform 2.4s cubic-bezier(0.1, 0.79, 0.11, 0.82);

	&-common {
		@apply w-full p-1;
		min-height: 100vh;
	}
	&-search {
		@apply w-full relative h-80vh;
		&_container {
			@apply absolute top-1/2 left-1/2  font-700 text-white;
			transform: translate(-50%, -50%);
			.sp-sticky {
				&_content {
					@apply rounded-2rem;
					border: 1px solid #ccc;
					.content-modal {
						@apply top-176px  !rounded-32px;
					}
				}
			}
		}
	}
	&_part2 {
		@apply w-full  p-4px bg-black;
		background: url("~/assets/images/group-photo.jpg") no-repeat;
		background-size: v-bind("backgroundSizeType");
		will-change: transform;
	}
}
</style>
